<template>
  <div class="app-container">
    <div class="block">
      <el-date-picker
        v-model="value2"
        type="daterange"
        unlink-panels
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        value-format="yyyy-MM-dd"
        @change="select"
      ></el-date-picker>
      <el-button
        :loading="downloadLoading"
        style="margin:10px 10px 20px 20px;"
        @click="exportExcel(followupData)"
        icon="el-icon-download"
        type="primary"
      >下载表格</el-button>
    </div>
    <el-table
      :data="followupData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
      border
      id="out-table"
    >
      <el-table-column prop="date" label="日期" align="center" width="100"></el-table-column>
      <el-table-column prop="class" label="班级" align="center" width="100"></el-table-column>
      <el-table-column prop="name" label="学员姓名" width="100" align="center"></el-table-column>
      <el-table-column
        width="100"
        align="center"
        prop="visitor"
        label="回访者"
        :filters="visitorList"
        :filter-method="filterHandler"
      ></el-table-column>
      <el-table-column prop="content" label="回访内容"></el-table-column>
    </el-table>
    <!-- 分页器 -->
    <div class="block" style="margin-top:15px" v-if="followupData.length>10">
      <el-pagination
        align="center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="followupData.length"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import FileSaver from "file-saver";
import XLSX from "xlsx";

export default {
  data() {
    return {
      downloadLoading: false,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      value2: [],
      followupData: [],
      visitorList: [],
      local: localStorage,
      // 分页
      currentPage: 1, // 默认第一页
      pageSize: 10 // 每页大小默认值
    };
  },
  created() {
    // 初始化选择器默认值
    var now = new Date();
    var startDate = new Date(Date.UTC(now.getFullYear(), now.getMonth(), 1))
      .toISOString()
      .slice(0, 10);
    var endDate = new Date(
      Date.UTC(now.getFullYear(), now.getMonth(), now.getDate())
    )
      .toISOString()
      .slice(0, 10);
    this.value2 = [];
    this.value2.push(startDate);
    this.value2.push(endDate);

    // 请求数据
    this.followupData = [];
    this.axios
      .get("/student/getDateFollow", {
        params: { start: startDate, end: endDate }
      })
      .then(res => {
        // 回访者筛选
        var visitorList = [];
        for (var i = 0; i < res.data.data.length; i++) {
          var visitor = res.data.data[i].visitor;
          if (localStorage.username == res.data.data[i].visitor) {
            this.followupData.push(res.data.data[i]);
            if (toCom(visitor)) {
              visitorList.push({ text: visitor, value: visitor });
            }
            function toCom(visitor) {
              for (var i = 0; i < visitorList.length; i++) {
                if (visitorList[i].text === visitor) {
                  return false;
                }
              }
              return true;
            }
          } else if (localStorage.username == "admin") {
            this.followupData.push(res.data.data[i]);
            if (toCom(visitor)) {
              visitorList.push({ text: visitor, value: visitor });
            }
            function toCom(visitor) {
              for (var i = 0; i < visitorList.length; i++) {
                if (visitorList[i].text === visitor) {
                  return false;
                }
              }
              return true;
            }
          }
        }

        this.visitorList = visitorList;
      });
  },
  methods: {
    // 筛选
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
    // 选中日期后执行的函数
    select() {
      var _this = this;
      _this.followupData = [];
      _this.axios
        .get("/student/getDateFollow", {
          params: { start: _this.value2[0], end: _this.value2[1] }
        })
        .then(res => {
          // 回访数据筛选
          for (var i = 0; i < res.data.data.length; i++) {
            if (localStorage.username == res.data.data[i].visitor) {
              this.followupData.push(res.data.data[i]);
            } else if (localStorage.username == "admin") {
              this.followupData.push(res.data.data[i]);
            }
          }
        });
    },
    // 分页
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  }
};
</script>

<style>
</style>